<template>
	<view class="container">
		<view class="top">
			<view class="li user flex-between" @click="switchImg">
				<text class="title">头像</text>
				<view class="rig flex-center">
					<image class="avatar" :src="userInfo.headImg"></image>
					<image src="../../../static/my/go_btn2.png" mode=""></image>
				</view>
			</view>
			<view class="li user flex-between" @click="toPath('nickName')">
				<text class="title">昵称</text>
				<view class="rig flex-center">
					<text>{{userInfo.username}}</text>
					<image src="../../../static/my/go_btn2.png" mode=""></image>
				</view>
			</view>
			<view class="li user flex-between">
				<text class="title">手机号码</text>
				<view class="rig flex-center">
					<text class="spa">{{userInfo.phone}}</text>
				</view>
			</view>
			<view class="li user flex-between" v-if="userInfo.wechatName">
				<text class="title">微信号</text>
				<view class="rig flex-center">
					<text class="spa">{{userInfo.wechatName}}</text>
				</view>
			</view>
			<button class="share" open-type="getUserInfo" @getuserinfo="getUserInfo" v-else>
				<view class="li user flex-between">
					<text class="title">微信号</text>
					<view class="rig flex-center">
						点击授权绑定
					</view>
				</view>
			</button>
			<view class="li user flex-between" @click="toPath('editPassword')">
				<text class="title">修改登录密码</text>
				<view class="rig flex-center">
					<image src="../../../static/my/go_btn2.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="bom" @click="outShow = true">
			退出登录
		</view>
		<!--弹窗 -->
		<van-dialog class="custom-dialog" use-slot title="提示" :show="outShow" :showConfirmButton="true" :showCancelButton="true"
		 closeOnClickOverlay @close="outShow = false" @confirm="out">
			<view class="vip-container">
				<view class="vip-tip">确定退出吗</view>
			</view>
		</van-dialog>
	</view>
</template>

<script>
	import {
		loading,
		loaded,
		tip
	} from '../../../utils/tip.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				outShow: false
			}
		},
		onLoad() {
			console.log(111)
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			toPath(val) {
				uni.navigateTo({
					url: `/pagesC/my/setting/${val}`
				})
			},
			switchImg() {
				let that = this
				uni.chooseImage({
					count: 1,
					success(res) {
						let file = res.tempFilePaths[0]
						uni.uploadFile({
							url: 'http://taoke.daihuo.com/api/app/comm/upload',
							filePath: file,
							name: 'files',
							success: function(uploadFileRes) {
								that.$service.common.personUpdate({
									headImg: JSON.parse(uploadFileRes.data).data
								}).then((res) => {
									that.$store.dispatch('getUserInfo')
									tip({
										title: '修改成功~'
									})
								}).catch((res) => {

								})
							},
							fail: function(err) {
								console.log('err', err)
							}
						});
					}
				})
			},
			out() {
				uni.setStorageSync('token')
				uni.reLaunch({
					url: '/pages/common/login'
				})
			},
			getUserInfo(e) {
				let that = this
				let params = {
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv
				}
				// #ifdef MP-WEIXIN
				wx.login({
					success(res) {
						if (res.code) {
							params.code = res.code
							that.$service.common.bindWechat(
								params
							).then(async (res) => {
								that.$store.dispatch('getUserInfo')
								that.$store.dispatch('getUserPerm')
							}).catch((err) => {
								tip({
									title: err
								})
							})
						}
					}
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		padding: 0 24rpx;
		background-color: white;

		.share {
			background-color: white;
			border: none;
			width: 100%;
			padding: 0;
			outline: none;
		}

		.share::after {
			border: none;
			border-bottom: 4rpx solid #F2F2F2;
		}

		.li {
			height: 100rpx;
			border-bottom: 2rpx solid #F2F2F2;

			image {
				width: 24rpx;
				height: 24rpx;
			}

			.avatar {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				margin-right: 14rpx;
				vertical-align: middle;
			}

			.spa {
				margin-right: 6rpx;
			}

			.rig {
				text {
					color: #999999;
				}
			}

		}

		.user {
			height: 116rpx;
		}
	}

	.top view:last-child {
		border: none;
	}

	.bom {
		height: 100rpx;
		background-color: white;
		padding: 0 24rpx;
		line-height: 100rpx;
		margin-top: 12rpx;
	}

	/deep/ .custom-dialog {
		.van-dialog__header {
			padding-top: 28rpx;
		}

		text-align: center;

		image {
			width: 250rpx;
			height: 250rpx;
		}

		.vip-container {
			padding-bottom: 56rpx;
		}

		.vip-tip {
			color: #666666;
			margin: 20rpx 0;
		}

		.vip-send {
			color: #0C5DFF;
			margin-top: 20rpx;
			margin-bottom: 60rpx;
		}

		.vip-btn {
			width: 342rpx;
			height: 72rpx;
			background-color: #0C5DFF;
			border-radius: 42rpx;
			line-height: 72rpx;
			text-align: center;
			color: white;
			margin: 0 auto;
			margin-top: 86rpx;
			font-size: 28rpx;
		}
	}
</style>
